
<template>
  <div class="songlist">
	  <router-link to='/playpage/Play'></router-link> 
    <div class="s-cover" v-for='(item,index) in items' v-bind:class='item.oclass' > <!-- 歌单列表 -->
	  <router-link to='/playpage/Play'>
    	<img v-bind:src="item.src" alt="" width="144px" height="144px" v-on:click='songsl(index)'></router-link> 
    	<a href="" >{{item.title}}</a>
    	<div class="bottom">
    		<a href=""></a>
    		<span class='icon'></span>
    		<span class="nb">{{item.num}}</span>
    	</div>
    </div>
   
  </div>
</template>

<script>
// var special = [];
		  	var arr = [];


export default {
  name: 'hello',
  data () {
    return {
   		items:[	{num:'140万',title:'',src:'http://on48k4f79.bkt.clouddn.com/8718367adab44aed2aed88c9bb1c8701a18bfb7f.jpg'},
   				{num:'240万',title:'',src:'http://on48k4f79.bkt.clouddn.com/09fa513d269759ee1d4e45dbb1fb43166d22df87.jpg'},
   				{num:'1540万',title:'',src:'http://on48k4f79.bkt.clouddn.com/279759ee3d6d55fb247bddda6c224f4a21a4dd89.jpg'},
   				{num:'40万',title:'',oclass:'c-mar',src:'http://on48k4f79.bkt.clouddn.com/a2cc7cd98d1001e9c109a0ceba0e7bec54e7973e.jpg'},
   				{num:'860万',title:'',src:'http://on48k4f79.bkt.clouddn.com/T002R300x300M000000ibLEm3rEG2S.jpg'},
   				{num:'250万',title:'',src:'http://on48k4f79.bkt.clouddn.com/d01373f082025aaf2f782f39faedab64024f1afd.jpg'},
   				{num:'405万',title:'',src:'http://on48k4f79.bkt.clouddn.com/023b5bb5c9ea15ce699421c8b3003af33b87b2fd.jpg'},
   				{num:'49万',title:' 一张翻唱专辑 一场致敬仪式',oclass:'c-mar',src:'http://p1.music.126.net/2j6LEHv-i4K-v1JMd_B1gA==/109951162878098545.jpg?param=140y140'},
   				
   				
   		],
		   special:'',
		   k:''

    }
    
  },
  mounted () {
		
		this.$http.get('http://localhost:3000/api/list?index=0&limit=69').then(soarings=>{
		 	var type = soarings.data
			 var j = {};
			 var special = [];
			 for (let i = 0; i < type.length; i++) {
				 let item = type[i].type;
				 if(!j[item]){
					 arr.push(item)
					 j[item] = 1;
				 }
			 }
			 console.log(arr)
			for (var j = 0; j < arr.length; j++) {
					this.items[j].title = arr[j]	
			}

		});
			
			
			
	
  },
  methods:{
	  songsl:function(index){
			//  console.log(arr)
				 	 this.$http.get('http://localhost:3000/api/listspecial?msg='+arr[index]).then(s=>{
						  this.$store.commit('addsongs',s)
						  console.log(s)

					})
	  }
  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.songlist{
	display: flex;
	flex-wrap:wrap;
	padding: 20px 0 0 15px;
  margin-bottom: 20px;
}
.s-cover{
	margin:0 46px 68px 0; 
	width: 140px;
    height: 140px;
    position: relative;
    cursor: pointer;

}
.s-cover:last-chlid{
	margin-right: 0px;
}
.bottom{
	position: absolute;
    bottom: -14px;
    left: 0;
    width: 100%;
    height: 27px;
    background-position: 0 -537px;
    color: #ccc;
}
.bottom a{
	    float: left;
	    width: 14px;
	    height: 11px;
	    background-position: 0 -24px;
	    margin: 9px 5px 9px 10px;
}
.nb{
	    float: left;
   	 margin: 7px 0 0 0;
}
.icon {
	position: absolute;
    right: 10px;
    bottom: 5px;
    width: 16px;
    height: 17px;
}
.s-cover>a{
	display: inline-block;
    max-width: 100%;
    color: #000;
    vertical-align: middle;
    margin-top: 12px;
	overflow: hidden;
}
.c-mar{  /*初始化每一列最后一个的外边距*/
	margin: 0
}
</style>
